<template>
  <div>
   <van-row type="flex" justify="center">
   <van-col span="6">狗屁网</van-col>
 </van-row>
   <van-form @submit="onSubmit">
   <van-field
     v-model="username"
     name="账号"
     label="账号"
     placeholder="账号"
     :rules="ruleArr"
   />
   <van-field
     v-model="password"
     type="password"
     name="密码"
     label="密码"
     placeholder="密码"
     :rules="[{ required: true, message: '请填写密码' }]"
   />
   <van-field
   v-model="sms"
   center
   clearable
   label="短信验证码"
   placeholder="请输入短信验证码"
 >
   <template #button>
     <van-button size="small" type="primary">发送验证码</van-button>
   </template>
 </van-field>
   <div style="margin: 16px;">
     <van-button round block type="info" native-type="submit">提交</van-button>
   </div>
 </van-form>
 <van-checkbox v-model="checked" icon-size="16px">同意《狗屁网注册协议》</van-checkbox>
 <van-list
   v-model="loading"
   :finished="finished"
   finished-text="我是有底线的"
   @load="onLoad"
 >
   <van-cell v-for="item in list" :key="item" :title="item" />
 </van-list>
  </div>
 </template>
 <script>
 const userHandle = (value,rule) => {
   var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
   var flag =reg.test(value)
   return flag
 }
 export default {
   data() {
     return {
       username: '',
       password: '',
       sms:'',
       checked:true,
       ruleArr:[{ required: true, message: '请填写账号' },{validator:userHandle,message: '手机号不合法'}],
       list: [],
       loading: false,
       finished: false,
     };
   },
   methods: {
     onSubmit(values) {
       console.log('submit', values);
     },
     onLoad() {
       // 异步更新数据
       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
       setTimeout(() => {
         for (let i = 0; i < 20; i++) {
           this.list.push(this.list.length + 1);
         }
 
         // 加载状态结束
         this.loading = false;
 
         // 数据全部加载完成
         if (this.list.length >= 120) {
           this.finished = true;
         }
       }, 3000);
     },
   },
 };
 </script>
 <style lang='less'  scoped>
     
 </style>
 
 